<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        html,body{
            height: 100%;
        }
        body{
            margin: 0;
            background: url("img/ bg.png") no-repeat center center/100% 100%;
        }
        a{
            text-decoration: none;
            color: inherit;
        }
        .header{
            height: 70px;
            background: rgba(0,0,0,0.5);
            line-height: 70px;
            display: flex;
            justify-content: space-between;
            color: #fff;
        }

        .header span,.header a,.header img{
            display: inline-block;
            vertical-align: middle;
        }

        .header a{
            padding: 0 16px;
        }

        .header img{
            width: 30px;
            height: 30px;
            border-radius: 50%;
            border: 1px solid #0a8cd2;
        }

        .right{
            padding-right: 20px;
        }

        .logo{
            height: 164px;
            /*background: #f0cdb9;*/
            display: flex;
            justify-content: center;
            align-items: flex-end;
        }

        .logo img{
            width: 203px;
        }

        .search{
            height: 77px;
            background: #0AA5E2;
        }

        .content{
            width: 1256px;
            height: 414px;
            background: #fff;
            margin: 123px auto 0;
        }
    </style>
</head>
<body>

<div class="header">
    <div class="left">
        <a href="#">新闻</a>
        <a href="#">官网</a>
        <a href="#">地图</a>
        <a href="#">直播</a>
        <a href="#">视频</a>
        <a href="#">贴吧</a>
        <a href="#">学术</a>
        <a href="#">更多</a>
    </div>

    <div class="right">
        <span>设置</span>
        <img src="img/%20header.png">
        <span>lexSeven</span>
    </div>
</div>


<div class="logo">
    <img src="img/%20logo.png">
</div>

<div class="search"></div>

<div class="content"></div>

</body>
</html>